﻿<style>
    .errors {
        border: 1px solid red;
    }

    .input {
        width: 97%;
        padding: 5px;
    }
        .title-a tr td{
        padding:10px;
        font-size: 14px;
text-transform: uppercase;
    }
</style>
 @{
     Lang lang = ViewBag.Lang;  
 } 

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    $(function () {
        debugger;
        var airports = [];
        $.ajax({
            url: '@Url.Action( "GetAllAirport", "FlightSearch")',
             type: 'POST',
             contentType: 'application/json; charset=utf-8;',
             dataType: 'json',
             success: function (response) {
                 for (var i = 0; i < response.length; i++) {
                     airports.push(response[i]);
                 }
                 return;
             },
             error: function (xhr, status, error) {
               
             }
         });

          $("#fromcity").autocomplete({
              source: airports
          });
          $("#tocity").autocomplete({
              source: airports
          });
      });
</script>

@using (Html.BeginForm("TicketNationalResult", "FlightSearch", FormMethod.Post, new { @id = "searchForm", @name = "searchForm" }))
{

        <table class="title-a">
        <tbody>
            <tr>
                <td style=" border-top-left-radius:2px;background-color:#dddddd"><a href="/Home" style="color:black;">@lang.TitleTicketDomestic</a></td>
                <td style="border-top-right-radius:2px;background-color:#888;"><a href="/FlightSearch/TicketNational" style="color:black;">@lang.TitleInternational</a></td>
            </tr>
        </tbody>
    </table>
    <div class="search-group" style="border-top-left-radius:0px;">


        <div class="ui-field-contain">
            <table>
                <tr>
                    <td>
                        <input type="hidden" id="hashWays" value="1" />
                        <input type="radio" checked="checked" value="1" name="ways" id="ways1" onchange="checkWays(this)" />@lang.ONEWAY 
                    </td>
                    <td>
                        <input type="radio" name="ways" value="2" id="ways2" onchange="checkWays(this)" />@lang.TWOWAY
                    </td>
                </tr>
            </table>
        </div>
        <div class="ui-field-contain">
            <table style="width: 100%">


                <tr>
                    <td style="width: 90px;">@lang.FROMCITY</td>
                    <td>
                        <input class="input" type="text" id="fromcity" name="fromcity" />

                    </td>
                </tr>
                <tr>
                    <td>@lang.TOCITY</td>
                    <td>
                        <input class="input" type="text" id="tocity" name="tocity" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="search-group">
        <div class="ui-field-contain">
            <table border="1" cellpadding="0" cellspacing="0" style="width: 100%">
                <tr>
                    <td style="width: 90px;">@lang.DEPARTDATE</td>
                    <td>
                        <input type="hidden" name="DatePickerDepartDate" id="DatePickerDepartDate">
                        @{
    int day = DateTime.Now.Day;
    int month = DateTime.Now.Month;
    int year = DateTime.Now.Year;
                        }
                        <select id="fday" style="width: 30%">
                            <option value="0">Ngày</option>
                            @for (int i = 1; i <= 31; i++)
                            {
                                if (i < 10)
                                {
                                    if (i == day)
                                    {
                                <option selected="selected">@("0" + i)</option>                            
                                    }
                                    else
                                    {
                                <option>@("0" + i)</option>                            
                                        
                                    }
                                }
                                else
                                {
                                    if (i == day)
                                    {
                                <option selected="selected">@i</option>  
                                    }
                                    else
                                    {
                                <option>@i</option>                                                                
                                    }
                                }
                            }
                        </select>
                        <select id="fmonth" style="width: 68%">
                            <option value="0">Tháng/Năm</option>

                            @for (int i = month; i <= month + 12; i++)
                            {
                                if (i < 10)
                                {
                                    if (i == month)
                                    {
                                <option selected="selected">@("0" + i + "/" + year)</option>                                                                    
                                    }
                                    else
                                    {
                                <option>@("0" + i + "/" + year)</option>                            
                                    }
                                }
                                else
                                {
                                    if (i > 12)
                                    {
                                        int temp = i - 12;
                                        if (temp < 10)
                                        {
                                            
                                <option>@("0" + temp + "/" + year)</option>                            
                                        }
                                        else
                                        {
                                <option>@temp/@year</option>                                                                                                        
                                        }
                                    }
                                    else
                                    {
                                        if (i == month)
                                        {
                                <option selected="selected">@i/@year</option>                                                                
                                        }
                                        else
                                        {
                                <option>@i/@year</option>                                                                                                            
                                        }
                                    }
                                }
                            }
                        </select>

                    </td>
                </tr>

                <tr>
                    <td>@lang.RETURNDATE</td>
                    <td>
                        <input type="hidden" name="DatePickerReturnDate" id="DatePickerReturnDate">
                        <select disabled="disabled" id="tday" style="width: 30%">
                            <option value="0">Ngày</option>
                            @for (int i = 1; i <= 31; i++)
                            {
                                if (i < 10)
                                {
                                    if (i == day)
                                    {
                                <option selected="selected">@("0" + i)</option>                            
                                    }
                                    else
                                    {
                                <option>@("0" + i)</option>                            
                                        
                                    }
                                }
                                else
                                {
                                    if (i == day)
                                    {
                                <option selected="selected">@i</option>  
                                    }
                                    else
                                    {
                                <option>@i</option>                                                                
                                    }
                                }
                            }
                        </select>
                        <select disabled="disabled" id="tmonth" style="width: 68%">
                            <option value="0">Tháng/Năm</option>

                            @for (int i = month; i <= month + 12; i++)
                            {
                                if (i < 10)
                                {
                                    if (i == month)
                                    {
                                <option selected="selected">@("0" + i + "/" + year)</option>                                                                    
                                    }
                                    else
                                    {
                                <option>@("0" + i + "/" + year)</option>                            
                                    }
                                }
                                else
                                {
                                    if (i > 12)
                                    {
                                        int temp = i - 12;
                                        if (temp < 10)
                                        {
                                            
                                <option>@("0" + temp + "/" + year)</option>                            
                                        }
                                        else
                                        {
                                <option>@temp/@year</option>                                                                                                        
                                        }
                                    }
                                    else
                                    {
                                        if (i == month)
                                        {
                                <option selected="selected">@i/@year</option>                                                                
                                        }
                                        else
                                        {
                                <option>@i/@year</option>                                                                                                            
                                        }
                                    }
                                }
                            }
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    <div class="search-group" style="padding: 5px; text-align: center;">
        <div class="item-search">
            @lang.ADULT
            <br />
            <span style="font-size: 10px; color: #bfb8b8;">(@lang.F12TN)</span>
            <div>
                <select name="Adult" id="Adult">
                    <option value="-1"></option>
                    <option value="0">0</option>
                    <option selected="selected" value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
        </div>
        <div class="item-search" style="margin: 0px 5px;">
            @lang.BABY<br />
            <span style="font-size: 10px; color: #bfb8b8;">(@lang.F0T2)</span>
            <div>
                <select name="Baby" id="Baby">
                    <option value="-1"></option>
                    <option selected="selected" value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

        </div>
        <div class="item-search">
            @lang.CHILD<br />
            <span style="font-size: 10px; color: #bfb8b8;">(@lang.F2T11)</span>
            <div>
                <select id="Child" name="Child">
                    <option value="-1"></option>
                    <option selected="selected" value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>

    <input type="button" class="btn-index btn-8 btn-8c" onclick="search();" value="@lang.SEARCH" />
}

<script>

    function checkWays(obj) {
        var val = $("#" + obj.id).val();
        document.getElementById("hashWays").value = val;
        if (val == 2) {
            $("#tday").attr("disabled", false);
            $("#tmonth").attr("disabled", false);
        }
        if (val == 1) {
            $("#tday").attr("disabled", true);
            $("#tmonth").attr("disabled", true);
        }
    }

    function clearError() {
        $("#fday").removeClass("errors");
        $("#fmonth").removeClass("errors")

        $("#tday").removeClass("errors");
        $("#tmonth").removeClass("errors")

        $("#Adult").removeClass("errors");
        $("#Baby").removeClass("errors");
        $("#Child").removeClass("errors");

        $("#fromcity").removeClass("errors");
        $("#tocity").removeClass("errors");
    }

    function search() {
        clearError();

        var flag = true;
        var ways = document.getElementById("hashWays").value;
        var datePickerDepartDate = null;
        if (ways === 1) {
            var fday = $("#fday").val();
            var fmonth = $("#fmonth").val();
            datePickerDepartDate = fday + "/" + fmonth;
            if (fday == 0) {
                $("#fday").addClass("errors");
                flag = false;
            }
            if (fmonth == 0) {
                $("#fmonth").addClass("errors");
                flag = false;
            }
            $("#DatePickerDepartDate").val(datePickerDepartDate);
        } else {
            var fday = $("#fday").val();
            var fmonth = $("#fmonth").val();
            if (fday == 0) {
                $("#fday").addClass("errors");
                flag = false;
            }
            if (fmonth == 0) {
                $("#fmonth").addClass("errors");
                flag = false;
            }

            datePickerDepartDate = fday + "/" + fmonth;
            $("#DatePickerDepartDate").val(datePickerDepartDate);

            var tday = $("#tday").val();
            var tmonth = $("#tmonth").val();
            if (fday == 0) {
                $("#tday").addClass("errors");
                flag = false;
            }
            if (fmonth == 0) {
                $("#tmonth").addClass("errors");
                flag = false;
            }
            debugger;
            var datePickerReturnDate = tday + "/" + tmonth;
            $("#DatePickerReturnDate").val(datePickerReturnDate);
            //if(Date.parse(datePickerReturnDate) < Date.parse(datePickerDepartDate)){
            //    $("#tday").addClass("errors");
            //    $("#tmonth").addClass("errors");
            //}
            //debugger;
            //var start = $('DatePickerDepartDate').datepicker("getDate");
            //var end = $('DatePickerReturnDate').datepicker("getDate");
            //if (start > end) {
            //    alert("Ngày đi phải nhỏ hơn ngày về");
            //    $('BeginDate').focus();
            //    return false;
            //}
        }

        var adult = $("#Adult").val();
        var baby = $("#Baby").val();
        var child = $("#Child").val();
        if (adult == -1) {
            $("#Adult").addClass("errors");
            flag = false;
        }
        if (baby == -1) {
            $("#Baby").addClass("errors");
            flag = false;
        }
        if (child == -1) {
            $("#Child").addClass("errors");
            flag = false;
        }

        var fromcity = $("#fromcity").val();
        var tocity = $("#tocity").val();
        if (fromcity == null || fromcity == "") {
            $("#fromcity").addClass("errors");
            flag = false;
        }
        if (tocity == null || tocity == "") {
            $("#tocity").addClass("errors");
            flag = false;
        }
        if (tocity == fromcity) {
            $("#fromcity").addClass("errors");
            $("#tocity").addClass("errors");
            alert("Sân bay đi phải khác sân bay về. ");
            flag = false;
        }

        if (flag === true) {
            document.forms["searchForm"].submit();
        }

    }

</script>
